<template>
	<view>
		<navigationBar :bgType="3" :backType="2" navigationTitle="充值" />

		<view class="wrap safe-area">
			<image
				class="wrap-bg"
				:src="getImageURL('navigationBar/top_bg.png')"
				mode="widthFix"
				:style="{ '--navigation-height': navigationHeight + 'px' }"
			/>

			<view
				class="wrap-balance"
				:style="
					'background-image:url(' +
					getImageURL('technician/recharge/balance_bg.png') +
					');'
				"
			>
				<view class="balance-top fb-28"> 当前余额(元) </view>

				<view class="balance-center flex align-center just-between">
					<view>
						<text class="fb-28 symbol">¥</text>
						<text class="fb-52">2000</text>
					</view>

					<image
						:src="getImageURL('technician/recharge/gr_balance.png')"
					/>
				</view>

				<view class="balance-bottom flex align-center">
					<view class="item f-28" @click="onCommission">
						佣金流水
					</view>
					<view class="line"> </view>
					<view class="item f-28" @click="onRecords"> 充值记录 </view>
					<view class="line"> </view>
					<view class="item f-28"> 消费明细 </view>
				</view>
			</view>

			<view class="wrap-recharge-list">
				<view class="list-title fb-32"> 选择充值金额 </view>

				<view class="recharge-list flex just-between">
					<block v-for="(item, index) in list" :key="index">
						<view
							class="item bg-img-set flex column just-between"
							:class="item.select ? 'item-select' : 'item-normal'"
							@click="onItem(index)"
							:style="
								'background-image:url(' +
								getImageURL(
									item.select
										? 'technician/recharge/choose_bg.png'
										: 'technician/recharge/normal_bg.png'
								) +
								');'
							"
						>
							<view class="item-recharge flex align-center">
								<text class="fb-24 symbol">充</text>
								<text class="fb-56">{{ item.recharge }}</text>
							</view>

							<view
								class="item-send flex align-center just-end fb-28"
							>
								<text>送</text>
								<text>{{ item.send }}</text>
							</view>
						</view>
					</block>
				</view>
			</view>

			<view class="wrap-recharge-style">
				<view
					class="technician-bg flex align-center just-between"
					@click="onChooseTechnician()"
				>
					<view class="left fb-32"> 选择为服务师充值 </view>

					<view class="right flex align-center just-end">
						<view class="value f-26"> 请选择 </view>

						<image
							class="arrow"
							:src="getImageURL('common/arrow.png')"
						/>
					</view>
				</view>

				<view class="pay-methods">
					<payMethods :showMethods="2" :status.sync="pay_methods" />
				</view>
			</view>

			<explain />

			<view class="recharge-btn f-32"> 充值并支付 </view>
		</view>
	</view>
</template>

<script>
	import payMethods from "@/subPages/components/payMethods/payMethods.vue";
	import explain from "@/subPages/components/contentExplain/contentExplain.vue";
	export default {
		components: {
			payMethods,
			explain,
		},
		data() {
			return {
				navigationHeight: this.$navigationHeight,
				list: [
					{
						recharge: 1000,
						send: 100,
						select: false,
					},
					{
						recharge: 3000,
						send: 400,
						select: false,
					},
					{
						recharge: 5000,
						send: 800,
						select: false,
					},
					{
						recharge: 10000,
						send: 2000,
						select: false,
					},
				],
				pay_methods: "",
			};
		},
		onReady() {
			uni.$on("chooseTechnician", (info) => {
				console.log("选择的技师", info);
			});
		},
		onUnload() {
			uni.$off("chooseTechnician");
		},
		methods: {
			/**
			 * 佣金流水
			 */
			onCommission() {
				uni.navigateTo({
					url: "/subPages/technician/mine/commissionDetail",
				});
			},
			/**
			 * 充值记录
			 */
			onRecords() {
				uni.navigateTo({
					url: "/subPages/technician/mine/rechargeRecords",
				});
			},
			/**
			 * 充值列表选中
			 */
			onItem(index) {
				this.list.forEach((item, i) => {
					item.select = i === index;
				});
			},
			/**
			 * 选择技师
			 */
			onChooseTechnician() {
				uni.navigateTo({
					url: "/subPages/technician/mine/chooseTechnician",
				});
			},
		},
	};
</script>

<style lang="scss" scoped>
	.wrap {
		position: relative;
		z-index: 1;
		padding-left: 30rpx;
		padding-right: 30rpx;
		box-sizing: border-box;

		.wrap-balance {
			margin-top: 50rpx;
			width: 100%;
			height: 331rpx;
			background-position: center;
			background-repeat: no-repeat;
			background-size: cover;
			position: relative;
			overflow: hidden;
			border-radius: 20rpx;
			z-index: 2;

			> view {
				position: absolute;
				left: 0;
				z-index: 3;
				overflow: hidden;
			}

			.balance-top {
				top: 62rpx;
				left: 36rpx;
				color: $theme-color;
			}

			.balance-center {
				top: 50%;
				transform: translateY(-50%);
				width: 100%;

				> view {
					margin-left: 36rpx;
					flex: 1;
					margin-right: 20rpx;
					overflow: hidden;
					color: $theme-color;

					.symbol {
						margin-right: 12rpx;
					}
				}

				> image {
					width: 190rpx;
					height: 68rpx;
				}
			}

			.balance-bottom {
				bottom: 0;
				width: 100%;
				height: 92rpx;
				flex-wrap: wrap;
				background-color: $theme-color;

				.item {
					flex: 1;
					height: 92rpx;
					line-height: 92rpx;
					text-align: center;
					color: $bg-text-color;
				}

				.line {
					width: 2rpx;
					height: 28rpx;
					background-color: $bg-text-color;
				}
			}
		}

		.wrap-recharge-list {
			margin-top: 30rpx;
			width: 100%;
			overflow: hidden;
			background-color: white;
			border-radius: 20rpx;
			padding: 30rpx 30rpx 10rpx 30rpx;
			box-sizing: border-box;

			.list-title {
				color: $title-color;
			}

			.recharge-list {
				margin-top: 36rpx;
				width: 100%;
				overflow: hidden;
				flex-wrap: wrap;

				.item {
					width: 300rpx;
					height: 146rpx;
					margin-bottom: 30rpx;
					box-sizing: border-box;
					padding: 20rpx;

					.item-recharge {
						width: 100%;
						overflow: hidden;
					}

					.symbol {
						margin-right: 10rpx;
					}

					.item-send {
						width: 100%;
						overflow: hidden;
					}
				}

				.item-normal {
					color: $theme-color;
				}

				.item-select {
					color: $bg-text-color;
				}
			}
		}

		.wrap-recharge-style {
			margin-top: 30rpx;
			width: 100%;
			background-color: white;
			border-radius: 20rpx;
			overflow: hidden;
			padding: 30rpx 20rpx 10rpx 30rpx;
			box-sizing: border-box;
			margin-bottom: 30rpx;

			.technician-bg {
				width: 100%;
				overflow: hidden;

				.left {
					color: $title-color;
				}

				.right {
					flex: 1;
					margin-left: 20rpx;

					.value {
						margin-right: 16rpx;
						flex: 1;
						color: #999999;
						text-align: right;
					}
				}
			}

			.pay-methods {
				margin-top: 20rpx;
				width: 100%;
				overflow: hidden;
			}
		}

		.recharge-btn {
			margin-top: 34rpx;
			width: 100%;
			height: 84rpx;
			line-height: 84rpx;
			text-align: center;
			overflow: hidden;
			border-radius: 10rpx;
			color: $bg-text-color;
			background-color: $theme-color;
		}
	}
</style>
